<template>
  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template slot="filter-content">
        <el-input
          v-model="listQuery.params.deptName"
          style="width: 200px"
          placeholder="搜索班级名"
          class="filter-item"
        />

      </template>

      <template slot="data-columns">

        <el-table-column align="center" label="班级" prop="deptName" />

        <el-table-column align="center" label="编号" prop="deptCode" />

        <el-table-column align="center" label="学生人数" prop="studentNum" />

        <el-table-column v-if="isTeacher" align="center" label="操作项">
          <template slot-scope="scope">
            <el-button
              id="btnEdit"
              size="small"
              type="success"
              icon="el-icon-share"
              @click="examDetail(scope.row)"
            >考试详情
            </el-button>
          </template>
        </el-table-column>
      </template>
    </data-table>

  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import { getRole } from '@/api/user/lesson'

export default {

  name: 'ClassList',
  components: { DataTable },

  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {}
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/exam/api/user/lesson/getDept'
      },
      classDetail: {
        classId: '',
        className: ''
      },
      isTeacher: true
    }
  },

  created() {
    getRole().then((response) => {
      const roleIds = response.data
      if (roleIds.indexOf('teacher') >= 0) {
        this.isTeacher = true
      } else {
        this.isTeacher = false
      }
    })
  },
  methods: {
    examDetail(row) {
      this.classDetail.deptId = row.deptId
      this.classDetail.deptName = row.deptName
      this.$router.push({ name: 'ClassExam', params: { classDetail: this.classDetail }})
    }
  }
}
</script>
